<template>
  <div>
    <el-form
      label-width="100px"
      :model="dataForm"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmitHandle()"
    >
        
		<el-col :span="8" style="height: 15vh;">
			<div style="display: flex;justify-content: flex-end;position: absolute;">
				<el-form :inline="true" :model="dataForm" ref="dataForm" :rules="dataRulePEDC" label-width="138px">
					<el-form-item prop="cpu" label="cpu:"size="small">
						<el-select v-model="dataForm.cpu"  clearable placeholder="请选择CPU"
							style="width:8vw; ">
							<el-option v-for="(item, index) in optionsCPU1" :key="index" :label="item.label"
							:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item prop="maxCloseTime" label="关门超时报警时间:" size="small">
						<el-input v-model="dataForm.maxCloseTime"  
						oninput="value=value.match(/^\d*(\.?\d{0,1})/g)[0] || ''"
						clearable style="width:4.8vw; ">
						</el-input>
						<span class="danwei"> (2-20s)</span>
					</el-form-item>
					<el-form-item prop="maxOpenTime" label="开门超时报警时间:" size="small">
						<el-input v-model="dataForm.maxOpenTime"  
						oninput="value=value.match(/^\d*(\.?\d{0,1})/g)[0] || ''"
						clearable style="width:4.8vw; ">
						</el-input>
						<span class="danwei"> (2-20s)</span>
					</el-form-item>
				</el-form>
			</div>
		</el-col>
		<el-col :span="8" style="height: 15vh;">
		</el-col>
		<el-col :span="8" style=";height: 15vh;position: relative;">
			<div style="margin-top: 50px;margin-left:40px;">
				<el-row class="bg4">
					<el-button class="baseInfoBtn1" type="primary" @click="readPEDC" size="small">读PEDC</el-button>
				</el-row>
				<el-row class="bg4" style="margin-top: 30px;">
					<el-button class="baseInfoBtn2" type="primary" @click="writePEDC" size="small">写PEDC</el-button>
				</el-row>
			</div>
		</el-col>
		
    </el-form>
  </div>
</template>

<script>
import debounce from "lodash/debounce";
export default {
  props: {
    dataForm: {
      type: Object,
    },
    pedca: {
      type: String,
    },
  },
  data() {
    return {
			optionsCPU1: [{
			value: 'cpu0',
			label: '配置0'
		},
		{
			value: 'cpu1',
			label: '配置1'
		}
	],
		id: '',
		cpu:'',
		pedc:'',//a or b
		maxCloseTime: "", //最大关门时间
		maxOpenTime: '', //最大开门时间
		testCloseConTime: "2", //测试关门持续时间
		testOpenConTime: '2', //测试开门持续时间
		endianAlarmTimeSetting: '2', //端门报警时间设定
	};

  },
  computed: {
    dataRulePEDC() {
				return {
					cpu: [{
						required: true,
						message: 'cpu不能为空',
						trigger: 'blur'
					}],
				}
			}
  },
  methods: {
//读PEDCA
			readPEDC() {
				this.getPEDC()
			},
			//写PEDC
			writePEDC() {

				if ((this.dataForm.maxCloseTime >= 2 && this.dataForm.maxCloseTime <= 20) && (this.dataForm.maxOpenTime >=
						2 && this.dataForm.maxOpenTime <= 20))  
				{
						this.$refs['dataForm'].validate((valid) => {
							if (!valid) {
							return false
						}
						var obj = {
							cpu: this.dataForm.cpu,
							pedc:this.dataForm.pedc,
							...this.dataForm,
						}
						this.$http[!this.dataForm.id ? 'post' : 'put']('/psc/pedcparams/write', obj).then(res => {
							if (res.data.code !== 0) {
								return this.$message.error(res.data.msg)
							}
							this.$message({
								message: '写入参数成功',
								type: 'success',
								duration: 1500,
							})
						})
					})
				} else {
					this.$message({
						message: '请输入正确参数',
						type: 'error',
						duration: 1500,
					})
				}
			},

			
			getPEDC() {
				this.$refs['dataForm'].validate((valid) => {
					if (!valid) {
						return false
					}
					var obj = {
						cpu: this.dataForm.cpu,
						pedc:this.dataForm.pedc,
					}
					
            
					this.$http.post('/psc/pedcparams/read',obj).then(res => {
						if (res.data.code == 0) {
							this.dataForm.maxCloseTime = res.data.data.maxCloseTime
							this.dataForm.maxOpenTime = res.data.data.maxOpenTime
							this.dataForm.cpu=res.data.data.cpu
							this.dataForm = res.data.data;
							this.$message({
								message: '读取参数成功',
								type: 'success',
								duration: 1500,
								onClose: () => {}
							})
						} else {
							this.$message({
								message: '读取参数失败',
								type: 'error',
								duration: 1500,
								onClose: () => {}
							})
						}
					})
				})
			},
  },
};
</script>

<style scoped>

.veresionDiv {
		display: flex;
		justify-content: space-between;
	}

	.flexc {
		display: flex;
		flex-direction: column;
	}

	.pedcBg {
		min-height: 180px;
		background-color: #fff;
		padding: 1vh 1.1vw;
	}

	/* .pedcBg>>>.el-form-item {
		margin-bottom: 6px !important;
	} */

	.bg3 {
		height: auto !important;
	}
	.bg4 {
		background-color: #fff;
		border-radius: 10px;
		margin-top: 20px;
		height: 3vh;
	}

	.baseInfoBtnRight>>>.baseInfoBtn1,
	.PEDCBtn>>>.baseInfoBtn1,
	.PEDCInfo>>>.baseInfoBtn1 {
		background: rgba(42, 130, 228, 1) !important;
		border-color: rgba(42, 130, 228, 1) !important;
		clear: both;
	}

	.baseInfoBtnRight>>>.baseInfoBtn1:focus,
	.baseInfoBtnRight>>>.baseInfoBtn1:hover,
	.PEDCBtn>>>.baseInfoBtn1:focus,
	.PEDCBtn>>>.baseInfoBtn1:hover,
	.PEDCInfo>>>.baseInfoBtn1:focus,
	.PEDCInfo>>>.baseInfoBtn1:hover {
		background: rgba(42, 130, 228, 1) !important;
		border-color: rgba(42, 130, 228, 1) !important;
	}

	.baseInfoBtnRight>>>.baseInfoBtn2,
	.PEDCBtn>>>.baseInfoBtn2,
	.PEDCInfo>>>.baseInfoBtn2 {
		background: rgba(255, 87, 51, 1) !important;
		border-color: rgba(255, 87, 51, 1) !important;
	}

	.baseInfoBtnRight>>>.baseInfoBtn2:focus,
	.baseInfoBtnRight>>>.baseInfoBtn2:hover,
	.PEDCBtn>>>.baseInfoBtn2:focus,
	.PEDCBtn>>>.baseInfoBtn2:hover,
	.PEDCInfo>>>.baseInfoBtn2:focus,
	.PEDCInfo>>>.baseInfoBtn2:hover {
		background: rgba(255, 87, 51, 1) !important;
		border-color: rgba(255, 87, 51, 1) !important;
	}

</style>
